<template>
  <view class="container">
    <view class="search-wrap">
      <u--input placeholder="请输入" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #909399" shape="circle"
        v-model="likeName" @change="input_change"></u--input>
    </view>

    <view class="list-content">
      <view class="list-container" v-if="tenant_list.length > 0">
        <u-checkbox-group v-model="check_list" placement="column">
          <view class="selct-tenant" v-for="item in tenant_list">
            <div class="left">
              <div class="name">{{ item.fXm }}</div>
              <div class="idcard">{{ item.fGmsfhm }}</div>
            </div>
            <u-checkbox :key="index" :name="item.fId"> </u-checkbox>
          </view>
        </u-checkbox-group>
      </view>

      <view v-else>
        <u-empty mode="list" text="暂无可选择的承租人！" :icon="baseImgUrl + 'no-icon2.png'">
        </u-empty>
      </view>
    </view>

    <view class="btns thispageBtn">
      <button class="cancel-btn lt" type="primary" @click="navBack()">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="submitHandle">
        保存
      </button>
    </view>
    <yy-watermark></yy-watermark>
  </view>
</template>

<script>
  import {
    Toast,
    navBack,
    handleClickRouter
  } from "@/utils/util.js";
  export default {
    data() {
      return {
        likeName: "", // 检索条件
        back_list: {},
        check_list: [],
        tenant_list: [],
      };
    },
    onLoad(options) {
      this.check_list = JSON.parse(options.check_list);
      this.back_list = JSON.parse(options.tenant_list);
      this.tenant_list = JSON.parse(options.tenant_list);

      console.log("this.tenant_list", this.tenant_list.length);
    },
    onShow() {},
    methods: {
      navBack,
      handleClickRouter,

      input_change() {
        if (!this.likeName) {
          this.tenant_list = this.back_list;
          return;
        }
        this.tenant_list = this.back_list.filter((item) => {
          return item.fXm.includes(this.likeName);
        });
      },

      submitHandle() {
        if (this.check_list.length === 0) {
          Toast("请选择租户");
          return;
        }

        uni.$emit("select_tenant", this.check_list);
        navBack();
      },
    },
  };
</script>

<style scoped lang="scss">
  ::v-deep .u-icon,
  .u-icon__icon {
    font-size: 16rpx;
  }

  .container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #f0f2f5;
  }

  .search-wrap {
    padding: 20rpx 30rpx;
    background: #fff;
    border-bottom: 1px solid #f1f1f1;
  }

  .list-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 20rpx;

    .list-container {
      flex: 1;
      background-color: #fff;
      overflow: scroll;

      .selct-tenant {
        height: 156rpx;
        border-bottom: 1rpx solid #ebedf0;
        padding: 40rpx 40rpx 16rpx 40rpx;

        display: flex;
        justify-content: space-between;

        .left {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        }

        .name {
          font-family: PingFang SC, PingFang SC;
          font-weight: bold;
          font-size: 36rpx;
          color: #333333;
        }

        .idcard {
          font-weight: 400;
          font-size: 26rpx;
          color: #bbbbbb;
        }
      }
    }
  }
</style>